<template>
  <div>
    <el-tabs v-model="this.$store.state.editableTabsValue" type="card" closable @tab-remove="removeTab"
             @tab-click="select">
      <el-tab-pane
        v-for="(item, index) in this.$store.state.editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <router-view></router-view>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "tables",
  data() {
    return {}
  },
  methods: {
    select(item) {
      var title = item.label
      if (title === "增") {
        this.$router.push("/createUser")
      } else if (title === "删") {
        this.$router.push("/deleteUser")
      } else if (title === "改") {
        this.$router.push("/updateUser")
      } else if (title === "查") {
        this.$router.push("/selectUser")
      } else if (title === "管理店铺账号密码") {
        this.$router.push("/shop")
      }else if (title === "商品管理") {
        this.$router.push("/productManger")
      }

    },
    removeTab(targetName) {
      this.$store.state.targetName = targetName;
      this.$store.commit('removeTab')
      this.$store.state.editableTabs.forEach((tab, index) => {
        if (tab.num === (targetName - 1)) {
          let eleNav = document.getElementsByClassName('el-tabs__nav')[0].children;
          eleNav[index].click();
        }
      });
    }
  },

}
</script>
